<!DOCTYPE html>
<html lang="en">

<head>
  {include file="common/meta" /}
</head>

<body>
  <div class="x-body">
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="getAuth()">认证/未认证(饼图)</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="getNum()">用户注册数量(折线图)</button>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM元素 -->
    <!-- 按分类统计帖子 -->
    <div id="cate" style="width: 100%;height:700px;"></div>



  </div>
</body>
<script src="/assets/admin/js/echarts.min.js"></script>
<script>
  //获取数据
  var userAll = `{$userAll}`
  //将json转为 JS 数组
  userAll = JSON.parse(userAll);

  //获取数据
  var authUser = `{$authUser}`
  authUser = JSON.parse(authUser);

  //获取数据
  var noAuthUser = `{$noAuthUser}`
  noAuthUser = JSON.parse(noAuthUser);

  // 获取数量
  var allUser = `{$timeUser}`;
  allUser = JSON.parse(allUser);
  console.log(allUser);



  //基于准备好的dom，初始化echarts实例
  var chartDom = echarts.init(document.getElementById('cate'));

  getAuth();

  function getAuth() {
    chartDom.clear();
    var option = {
      title: {
        text: `用户统计(总共${userAll}人)`,
        subtext: '认证/未认证',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: authUser, name: '认证' },
            { value: noAuthUser, name: '未认证' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    chartDom.setOption(option);
  }

  function getNum() {
    chartDom.clear();
    var option = {
      title: {
        text: '用户注册数量',
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['注册用户']
      },
      xAxis: {
        type: 'category',
        data: Object.keys(allUser)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '注册用户',
          data: Object.values(allUser),
          type: 'line'
        },
      ]
    };
    chartDom.setOption(option);
  }

</script>